<template>
  <div>
    <div class="ym" >
      <img :src="img" alt="" />
      <h4>{{name}}</h4>
      <br />
      <div class="a">
        <span class="count">{{price}}</span><span><input type='number' v-model='cnum' @change="changeNum" ></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CartItem",
  props:{
    id:Number,
    img:String,
    name:String,
    num:Number,
    price:Number
  },
  data:function(){
    return {
      cnum:0,
    }
  },
  mounted:function(){
    this.cnum=this.num
  },
  methods:{
    changeNum:function(){
      console.log('儿子出发了修改事件');
      //this.$emit('changeFatherNum',this.cnum,1,2,3,4,5,6);
      this.$emit('fromChildren',this.cnum,this.id);
    },
    tofather(){
      console.log('tofather from son');
      this.$emit('click');
    }
  },
  created:function(){
    console.log('cartitem 创建了');
  }
};
</script>

<style>
.shoping {
     margin:0 5%;
 }
 .ym {
     width: 420px;
     height: 285px;
     background-color: #fff;
     margin-bottom: 20px;
     border-radius: 6px;
 }
 img {
     border-radius: 6px 6px 0px 0px;
     width: 420px;
 }
 .count {
     color: #E04F9F;
 }
 h4 {
     margin: 12px 40px -8px 20px;
 }
.a {
    margin-left: 20px;
    color: #7C7F92;
    font-size: 15px;
    padding-bottom: 10px;
    margin-bottom: 10px;
 }
</style>